<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品基本信息</title>
    <!--使用elementui 必须引入vue-->
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <!-- ele引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- ele引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <span>商品基本信息</span><br>
    <el-row>
        <el-col :span="6"><span>商品名： </span>
            <el-input v-model="inputName" style=" width :200px" placeholder="请输入商品名称"></el-input>
        </el-col>
        <el-col :span="6"><span>商品号： </span>
            <el-input v-model="inputCode" style=" width :200px" placeholder="请输入商品编号"></el-input>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" @click="clickQuery">查询</el-button>
            <el-button type="primary" @click="dialogFormVisible = true ; openInsert()">新增</el-button>
            <br></el-col>
    </el-row>
    <!--  :data="goodsdata"-->
    <template>
        <el-table
                :data="goodsdata"
                empty-text="正在努力加载中..."
                height="490"
                border
                style="width: 100%">
            <el-table-column
                    prop="goodsCode"
                    label="商品编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="goodsName"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="goodsPrice"
                    label="商品价格"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="categoryCode"
                    label="商品类别编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="company"
                    label="生产公司">
            </el-table-column>
            <el-table-column
                    prop="auNo"
                    label="文号">
            </el-table-column>
            <el-table-column
                    prop="dosageForm"
                    label="剂型"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="specification"
                    label="规格"
                    width="150">
            </el-table-column>
            <el-table-column
                    width="150"
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="dialogFormVisible = true; updateEdit(scope.$index)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteByCode(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center">
            <el-pagination
                    :current-page.sync="pageNum"
                    background
                    layout="prev, pager, next"
                    @current-change="onCurrent"
                    :total="total">
            </el-pagination>

            <el-dialog title="编辑商品基本信息" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="商品编号" :label-width="formLabelWidth" prop="code">
                        <el-input v-model="form.code" autocomplete="off"></el-input>
                    </el-form-item>
                    <!--prop 匹配 表单rows字段 -->
                    <el-form-item label="商品名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" :label-width="formLabelWidth" prop="price">
                        <el-input v-model="form.price" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称" :label-width="formLabelWidth" prop="company">
                        <el-input v-model="form.company" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="批准文号" :label-width="formLabelWidth" prop="auNo">
                        <el-input v-model="form.auNo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="剂型" :label-width="formLabelWidth" prop="dosage">
                        <el-input v-model="form.dosage" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="规格" :label-width="formLabelWidth" prop="specification">
                        <el-input v-model="form.specification" autocomplete="off"></el-input>
                    </el-form-item>
                   <!-- <el-form-item label="类目编号" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择所属类目">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
</div>

<script>
    var v = new Vue({
        el: "#app",

        created() {
            axios.post
            ("http://127.0.0.1:8001/goodsInfo/getGoodsByPage", {
                // params
                pageNum: this.pageNum,
            }).then((res) => {
                this.goodsdata = res.data.list;
                this.total = res.data.total;
                //this.pageNum = res.data.pageNum;
                console.info(this.goodsdata);
                // console.info(res.data);
                // console.info("总数："+res.data.total)

            });
        },

        methods: {
            onCurrent(pageNum) {
                axios.post
                ("http://127.0.0.1:8001/goodsInfo/queryByPost", {
                    // params
                    pagination:{
                    pageNum: this.pageNum,
                    },
                    goodsInfo:{
                        goodsCode: this.inputCode,
                        goodsName: this.inputName
                    }
                }).then((res) => {
                    this.goodsdata = res.data.list;
                    this.total = res.data.total;
                    //this.pageNum = res.data.pageNum;
                    // console.info(this.goodsdata);
                    // console.info("总数："+res.data.total)
                });
            },

            //待解决问题：无法在条件查询后页面进行切换页码
            //解决方法：将当前界面所有查询的场景写在同一个接口中
            clickQuery() {
                this.pageNum = 1;
                axios.post
                ("http://127.0.0.1:8001/goodsInfo/queryByPost", {
                    // params
                    pagination:{
                        pageNum: this.pageNum,
                    },
                    goodsInfo:{
                        goodsCode: this.inputCode,
                        goodsName: this.inputName
                    }
                }).then(res => {
                    if (res.data.list.length != 0) {
                        this.goodsdata = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.$alert('不存在该商品信息！', '提示');
                    }
                    console.info(res.data.list);
                });
            },
            deleteByCode(index) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true

                }).then(() => {
                    var code = this.goodsdata[index].goodsCode;
                    axios.post
                    ("http://127.0.0.1:8001/goodsInfo/deleteByCode", {
                        // params
                        // pageNum:this.pageNum,
                        goodsCode: code,
                    }).then(res => {
                        console.info(res.data);
                    })
                    //js的splice方法，删除index下标的1个项目数 ==》 可以做到删除后动态渲染效果 其实该行已经 不存在
                    this.goodsdata.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateEdit(index){
                this.currentIndex = index;
                this.form.name = this.goodsdata[index].goodsName;
                this.form.code = this.goodsdata[index].goodsCode;
                this.form.goId = this.goodsdata[index].id;
                this.form.price = this.goodsdata[index].goodsPrice;
                this.form.company = this.goodsdata[index].company;
                this.form.auNo = this.goodsdata[index].auNo;
                this.form.dosage = this.goodsdata[index].dosageForm;
                this.form.specification = this.goodsdata[index].specification;
            },
            openInsert(){
                this.form.name = '';
                this.form.code = '';
                this.form.price = '';
                this.form.company = '';
                this.form.auNo = '';
                this.form.dosage = '';
                this.form.specification = '';
                this.form.goId = 0;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //当为新增的场景下
                        if(this.form.goId==0){
                            axios.post
                            ("http://127.0.0.1:8001/goodsInfo/updateGoodsInfo", {
                                // params
                                id : this.form.goId,
                                goodsName:this.form.name,
                                goodsCode:this.form.code,
                                goodsPrice:this.form.price,
                                categoryCode:this.form.cateCode,
                                company:this.form.company,
                                auNo:this.form.auNo,
                                dosageForm:this.form.dosage,
                                specification:this.form.specification
                            }).then((res) => {
                                this.$message(res.data);

                            });
                            console.info(this.pageNum);
                            this.onCurrent();
                        }else{
                            axios.post
                            ("http://127.0.0.1:8001/goodsInfo/updateGoodsInfo", {
                                // params
                                id : this.form.goId,
                                goodsName:this.form.name,
                                goodsCode:this.form.code,
                                goodsPrice:this.form.price,
                                categoryCode:this.form.cateCode,
                                company:this.form.company,
                                auNo:this.form.auNo,
                                dosageForm:this.form.dosage,
                                specification:this.form.specification
                            }).then((res) => {
                                this.$message(res.data);
                                console.info(res.data);
                                this.goodsdata.splice(this.currentIndex, 3, {
                                    goodsCode : this.form.code,
                                    goodsName : this.form.name,
                                    goodsPrice:this.form.price,
                                    company:this.form.company,
                                    auNo:this.form.auNo,
                                    dosageForm:this.form.dosage,
                                    specification:this.form.specification
                                });
                            });
                        }

                        this.dialogFormVisible = false ;
                    } else {
                        this.$message({
                            showClose: true,
                            message: '输入有误',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
        },
        data() {
            return {
                inputName: '',
                inputCode: '',
                goodsdata: [],
                total: this.total,
                pagesize: 10,
                currentPage: 2,
                pageNum: 1,
                currentIndex:0,

                //dialog
                dialogFormVisible: false,
                form: {
                    goId:0,
                    name: '',
                    code: '',
                    price: '',
                    cateCode: '',
                    company: '',
                    auNo: '',
                    dosage: '',
                    specification: ''
                },
                //校验规则
                rules: {
                    //blur -- 失焦
                    name: [
                        {required: true, message: '请输入商品名称', trigger: 'blur'},
                        {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入商品编号', trigger: 'blur'},
                        {min: 4, max: 6, message: '长度在 4 到 6 个字符', trigger: 'blur'}]
                },
                formLabelWidth: '100px'
            }
        },
    });
</script>
</body>
</html>
